<template>
  <div class="my_echarts_02">
    <v-chart :option="mychart_02" id="mychart_02" style="box-sizing: border-box;"></v-chart>
  </div>
</template>

<script>
import { graphic } from 'echarts'

export default {
  name: 'my_echarts_02',
  data() {
    return {
      mychart_02: null
    }
  },
  mounted() {
    // 设置配置项
    this.mychart_02 = {
      title: {
        text: "卡路里每周计划（单位：千卡）",
        textStyle: {
          fontSize: 18,
        }
      },
      tooltip: { // 鼠标悬浮提示字体大小
        trigger: 'axis'
      },
      legend: {
        left: 'right',
        itemGap: 12, // 图例间隔
        itemHeight: 12,
        textStyle: {
          fontSize: 12
        }
      },
      grid: {
        top: "10%",
        left: "10%",
        right: "10%",
        bottom: "10%",
      },
      xAxis: [
        {
          type: "category",
          axisLine: {
            show: true,
          },
          splitLine: {
            show: false,
          },
          boundaryGap: false,
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
      ],
      yAxis: [
        {
          type: "value",
          min: 0,
          splitNumber: 4,
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.1)",
            },
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
            margin: 20,
            textStyle: {
              color: "#d1e6eb",
            },
          },
          axisTick: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: "消耗",
          type: "line",
          // smooth: true, //是否平滑
          showAllSymbol: true,
          // symbol: 'image://./static/images/guang-circle.png',
          symbol: "circle",
          symbolSize: 18,
          lineStyle: {
            normal: {
              color: "#ff8088",
              shadowColor: "rgba(0, 0, 0, .3)",
              shadowBlur: 0,
              shadowOffsetY: 5,
              shadowOffsetX: 5,
            },
          },
          label: {
            show: true,
            position: "top",
            textStyle: {
              color: "#ff8088",
            },
          },
          itemStyle: {
            color: "#ff8088",
            borderColor: "#fff",
            borderWidth: 2,
            shadowColor: "rgba(0, 0, 0, .3)",
            shadowBlur: 0,
            shadowOffsetY: 1,
            shadowOffsetX: 1,
          },
          areaStyle: {
            normal: {
              color: new graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(255, 128, 136, 0.3)",
                  },
                  {
                    offset: 1,
                    color: "rgba(255, 128, 136, 0)",
                  },
                ],
                false
              ),
              shadowColor: "rgba(255, 128, 136, 0.9)",
              shadowBlur: 20,
            },
          },
          data: [420, 200, 330, 280, 390, 210, 280],
        },
        {
          name: "补充",
          type: "line",
          // smooth: true, //是否平滑
          showAllSymbol: true,
          // symbol: 'image://./static/images/guang-circle.png',
          symbol: "circle",
          symbolSize: 18,
          lineStyle: {
            normal: {
              color: "#00ca95",
              shadowColor: "rgba(0, 0, 0, .3)",
              shadowBlur: 0,
              shadowOffsetY: 5,
              shadowOffsetX: 5,
            },
          },
          label: {
            show: true,
            position: "top",
            textStyle: {
              color: "#00ca95",
            },
          },

          itemStyle: {
            color: "#00ca95",
            borderColor: "#fff",
            borderWidth: 2,
            shadowColor: "rgba(0, 0, 0, .3)",
            shadowBlur: 0,
            shadowOffsetY: 1,
            shadowOffsetX: 1,
          },
          areaStyle: {
            normal: {
              color: new graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(0,202,149,0.3)",
                  },
                  {
                    offset: 1,
                    color: "rgba(0,202,149,0)",
                  },
                ],
                false
              ),
              shadowColor: "rgba(0,202,149, 0.9)",
              shadowBlur: 20,
            },
          },
          data: [280, 380, 210, 180, 280, 350, 280],
        },
      ],
    }
  }
}
</script>

<style scoped>
  .my_echarts_02 {
    width: 500px;
    height: 420px;
    position: absolute;
    left: 720px;
    top: 300px;
    border: 20px solid transparent;
    border-image: url("../../../assets/images/border_wood.png") 20 20 20;
  }

  #mychart_02 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 10px;
    background-color: #eee;
  }
</style>
